<template>
  <head-top></head-top>
  <div class="item_center">
    <div class="box_size">
      <div style="text-align: center">
        <h1> 商品评价</h1>
      </div>
      <div>
        <div v-for="item in OrderAppraiseVo" :key="item.orderItemId">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="center_class">
                <div>
                  <el-image :src="$img + item.skuImg" style="width: 150px"></el-image>
                  <div>
                   <span style="color: darkorange;font-size: 30px;font-weight: 300">
                     ￥ {{ item.totalPrice }}
                   </span>
                  </div>
                  <div>
                    <span>{{ item.skuSpecs }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="16">
              <div>
                <el-card class="box-card">
                  <template #header>
                    <span>填写商品评价</span>
                  </template>
                  <div>
                    <el-form label-width="80px">
                      <el-form-item label="商品评分">
                        <el-rate
                            v-model="item.rating"
                        ></el-rate>
                      </el-form-item>
                      <el-form-item label="评价晒单">
                        <el-input
                            v-model="item.comment"
                            placeholder="请输入你的评语"
                            type="textarea"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="上传">
                        <el-upload
                            :action="$upFile"
                            :limit="8"
                            :data="fileInfoVo"
                            name="files"
                            :headers="getHeader"
                            list-type="picture-card"
                            :file-list="fileIds"
                            :on-success="(response)=>getUpFileId(item,response)"
                        >
                          <el-icon>
                            <Plus/>
                          </el-icon>
                          <template #tip>
                            <div class="el-upload__tip">
                              最多可上传8个文件
                            </div>
                          </template>
                        </el-upload>
                      </el-form-item>
                      <el-form-item label="是否同步到动态">
                       <el-radio :label="item.isUserPosts"></el-radio>
                      </el-form-item>
                    </el-form>
                  </div>
                  <div style="display: flex; justify-content: center">
                    <button
                        class="btn"
                        @click="submitAppraise"
                    >
                      提交评价
                    </button>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getOrderAppraiseVoApi, orderAppraiseApi} from '@/api/order'
import {onMounted, ref} from "vue";
import {Plus} from '@element-plus/icons-vue'
import {useRoute, useRouter} from "vue-router";
import {getToken} from "@/util/token/tokenUtil";
import HeadTop from "@/components/home/HeadTop";

let OrderAppraiseVo = ref()
let fileIds = ref([])
const route = useRoute()
const router = useRouter()
const fileInfoVo = {
  bucketName: 'goods',
  folderName: 'appraise',
}

function getOrderAppraiseVo() {
  getOrderAppraiseVoApi(route.query.orderId).then(res => {
    OrderAppraiseVo.value = res.data
  })
}

function getUpFileId(item, res) {
  // if (item.fileIds!=null || item?.fileIds.length>0) {
  //   item.fileIds = item.fileIds + "," + res.data
  // } else {
  //   item.fileIds = res.data
  // }
  if (Array.isArray(item.fileIds)){
    item.fileIds.push(res.data)
  }
  else item.fileIds=[res.data]
}

function submitAppraise() {
  orderAppraiseApi(OrderAppraiseVo.value).then(res => {
    router.push("/person/person-appraise")
  })
}

function getHeader() {
  return {'token': getToken('token')};
}

onMounted(() => {
  getOrderAppraiseVo()
})
</script>

<style scoped>
.center_class {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.btn {
  width: 200px;
  height: 35px;
  background-color: #098CC0;
  border: none;
  color: aliceblue;
}

.el-upload__tip {
  color: red;
}
</style>
